//歌单列表界面
<template>
  <div class="song-list">
    <loading v-model="LoadShow"/>
    <div class="song-item" v-if="!LoadShow">
      <h3 class="top title">云音乐榜单</h3>
      <song-item :data="topList" />
      <h3 class="hot title">热门歌单</h3>
      <song-item :data="songList" />
    </div>
  </div>
</template>

<script>
import { getPersonalized, getToplistDetail } from 'api';
import songItem from '@/components/songItem/index.vue';
import loading from '@/components/loading/index.vue';
import mixin from '@/util/mixin';

export default {
  name: 'songList',
  components: {
    songItem,
    loading,
  },
  mixins: [mixin],
  data() {
    return {
      topList: [],
      songList: [],
    };
  },
  created() {
    this.getSongList();
    this.geTopList();
  },
  methods: {
    // 获取推荐歌单数据
    async getSongList() {
      const res = await getPersonalized();
      this.songList = res.result;
      this.hideLoad();
    },
    // 获取官方榜单数据
    async geTopList() {
      const res = await getToplistDetail();
      this.topList = res.list.filter((v) => v.ToplistType);
    },
  },

};
</script>

<style lang="scss" scoped>
.song-list {
  height: 100%;
  overflow-y: scroll;
  position: relative;
  .song-item {
    .title {
      color: white;
      font-size: 20px;
      padding: 10px 0;
      font-weight: 300;
    }
    .hot {
      padding-top: 20px;
    }
  }
}
</style>
